<template>
	<div class="wrapper">
		<!--header-->
		<header>
			<div class="back">
				<p @click="goBack">&lt;</p>
			</div>
			<p>用户登录</p>
		</header>

		<!---->
		<ul class="formBox">
			<li>
				<div class="title">
					账号
				</div>
				<div class="content">
					<input type="text" v-model="userId" placeholder="手机号码">
				</div>
			</li>
			<li>
				<div class="title">
					密码
				</div>
				<div class="content">
					<input type="password" v-model="password" placeholder="密码" ref="mima">
				</div>
				<div class="icon" @click="togglePasswordVisibility" ref="btn">
					<i class="fa fa-eye-slash" ref="close"></i>
					<i class="fa fa-eye" ref="open"></i>
				</div>
			</li>
		</ul>

		<div class="button-login">
			<button @click="login">登录</button>
		</div>
		<div class="button-register">
			<button @click="register">还没有账号？去注册</button>
		</div>

		<!--footer-->
		<Footer></Footer>
	</div>
</template>
<!--
<script>
	import Footer from '../components/Footer.vue';

	export default {
		name: 'Login',
		data() {
			return {
				userId: '',
				password: ''
			}
		},
		methods: {
			login() {
				if (this.userId == '') {
					alert('手机号码不能为空！');
					return;
				}
				if (this.password == '') {
					alert('密码不能为空！');
					return;
				}

				//登录请求
				this.$axios.post('UserController/getUserByIdByPass', this.$qs.stringify({
					userId: this.userId,
					password: this.password
				})).then(response => {
					let user = response.data;
					if (user == null) {
						alert('用户名或密码不正确！');
					} else {
						//sessionstorage有容量限制，为了防止数据溢出，所以不将userImg数据放入session
						中
						user.userImg = '';
						this.$setSessionStorage('user', user);
						this.$router.go(-1);
					}
				}).catch(error => {
					console.error(error);
				});
			},
			register() {
				this.$router.push({
					path: 'register'
				});
			}
		},
		components: {
			Footer
		}
	}
</script>
-->

<script>
	//import {ref} from 'vue';
	import Footer from "@/components/Footer.vue";

	export default {
		name: 'Login',
		
		data(){
			return {
				userId:'',
				password:''
			}
		},
		methods:{
			goBack() {
			  this.$router.go(-1);
			},
			login(){
				if(this.userId==''){
					alert('手机号不能为空');
					return;
				}
				if(this.password==''){
					alert('密码不能为空');
					return;
				}
				this.$axios.post('UserController/getUserByIdByPass', this.$qs.stringify({
						userId:this.userId,
						password:this.password
					}))
					.then(response => {
						let user = response.data;
						if(user==null){
							alert('用户名或密码不正确');
						}else{
							//防止sessionStorage溢出
							user.userImg = '';
							this.$setSessionStorage('user',user);
							this.$router.go(-1);
						}
					})
					.catch(error => {
						console.error(error);
					});
			},
			register(){
				this.$router.push({path:'/register'});
			}
		},
		mounted() {
			let open = this.$refs.open;
			let close = this.$refs.close;
			let button = this.$refs.btn;
			let mima = this.$refs.mima;
			open.style.display = 'none';

			button.onclick = () => {
				if (close.style.display === 'none') {
					close.style.display = 'block';
					open.style.display = 'none';
					mima.type = 'password';
				} else {
					close.style.display = 'none';
					open.style.display = 'block';
					mima.type = 'text';
				}
			};
		},
		components: {
			Footer
		},
	};
</script>
<!--
<script>
	import {
		ref,
		onMounted
	} from 'vue';
	import Footer from "@/components/Footer.vue";
	import {
		useRouter
	} from 'vue-router';

	export default {
		name: 'Login',
		setup() {
			const userId = ref('');
			const password = ref('');
			const router = useRouter();
			const mimaRef = ref(null);
			const gotoPreviousPage = () => {
				router.back();
			};

			return {
				gotoPreviousPage
			};
			onMounted(() => {
			const login = () => {
				if (userId.value === '') {
					alert('手机号不能为空');
					return;
				}
				if (password.value === '') {
					alert('密码不能为空');
					return;
				}
				this.$axios
					.post('UserController/getUserByIdByPass', this.$qs.stringify({
						userId: userId.value,
						password: password.value
					}))
					.then(response => {
						let user = response.data;
						if (user == null) {
							alert('用户名或密码不正确');
						} else {
							//防止sessionStorage溢出
							user.userImg = '';
							this.setSessionStorage('user', user);
							this.$router.go(-1);
						}
					})
					.catch(error => {
						console.error(error);
					});
			};
			});
			const togglePasswordVisibility = () => {
			      const mima = mimaRef.value;
				  const open = open.value;
				  const close = close.value;
				  open.style.display='block';
				  close.style.display='none';
			      if (mima.type === 'password') {
			        mima.type = 'text';
					open.style.display = 'block';
					close.style.display = 'none';
			      } else {
			        mima.type = 'password';
					open.style.display = 'none';
					close.style.display = 'block';
			      }
			    };
			
			    return {
			      mimaRef,
			      togglePasswordVisibility
			    };
			/*onMounted(() => {
				const open = this.$refs.open;
				const close = this.$refs.close;
				const button = this.$refs.btn;
				const mima = this.$refs.mima;
				open.value.style.display = 'none';

				button.value.onclick = () => {
					if (close.value.style.display === 'none') {
						close.value.style.display = 'block';
						open.value.style.display = 'none';
						mima.value.type = 'password';
					} else {
						close.value.style.display = 'none';
						open.value.style.display = 'block';
						mima.value.type = 'text';
					}
				};
			});*/

			return {
				userId,
				password,
				login,
				Footer
			};
		}
	};
</script>
-->
<style scoped>
	/****************总容器*********************/

	.wrapper {
		width: 100%;
		height: 100%;

	}

	/****************header*********************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #FFFFFF;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		align-items: center;
		justify-content: center;
	}

	.wrapper header .back {
		position: absolute;
		width: 2vw;
		height: 2vw;
		left: 1.5vw;
		top: 2.8vw;
		user-select: none;
		cursor: pointer;
	}

	/*biaodan*/
	.wrapper .formBox {
		width: 100%;
		margin-top: 18vw;
	}

	.wrapper .formBox li {
		width: 100%;
		height: 8.5vw;
		box-sizing: border-box;
		padding: 0 3vw 0 3vw;
		display: flex;
		align-items: center;
		border: solid 1px #999999;
		border-radius: 8.5px;
		position: relative;
	}

	.wrapper .formBox li .title {
		flex: 0 0 18vw;
		font-size: 3vw;
		font-weight: 700;
		height: 100%;
		color: #666666;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.wrapper .formBox li .content {
		flex: 1;
	}

	.wrapper .formBox li .content input {
		border: none;
		outline: none;
		height: 4vw;
		font-size: 3vw;
	}

	.wrapper .formBox li .icon {
		color: #666666;
	}

	.wrapper .formBox li .icon .fa-eye {
		position: absolute;
		right: 4vw;
		top: 2vw;
	}

	.wrapper .formBox li .icon .fa-eye-slash {
		position: absolute;
		right: 4vw;
		top: 2vw;
	}

	.wrapper .button-login {
		width: 100%;
		box-sizing: border-box;
		padding: 4vw 3vw 0 3vw;
	}

	.wrapper .button-login button {
		width: 100%;
		height: 10vw;
		font-size: 3.8vw;
		font-weight: 700;
		border: none;
		outline: none;
		color: #FFFFFF;
		background-color: #38CA73;
		border-radius: 15px;
	}

	.wrapper .button-register {
		width: 100%;
		box-sizing: border-box;
		padding: 4vw 3vw 0 3vw;
	}

	.wrapper .button-register button {
		width: 100%;
		height: 10vw;
		font-size: 3.8vw;
		font-weight: 700;
		border: none;
		outline: none;
		color: #666666;
		background-color: #EEEEEE;
		border-radius: 15px;
		border: solid 1px #DDDDDD;
	}
</style>
